<template>
	<view class="uni-input member-selector" @click="showMemberSelector = true">
	  <view class="selected-members" v-if="selectedMembers.length > 0">
	    <view class="member-tag" v-for="(member, index) in selectedMembers" :key="member.id">
	      {{ member.name }}
	      <view class="close-icon" @click.stop="removeMember(member.id)">×</view>
	    </view>
	  </view>
	  <view v-else class="placeholder">请选择</view>
	</view>
	
	<!-- 成员选择弹窗 -->
	<view class="member-selector-modal" v-if="showMemberSelector">
	  <view class="modal-mask" @click="showMemberSelector = false"></view>
	  <view class="modal-content">
	    <view class="modal-header">
	      <view class="modal-title">选择成员</view>
	      <view class="modal-close" @click="showMemberSelector = false">×</view>
	    </view>
	    
	    <view class="modal-body">
	      <!-- 部门筛选 -->
	      <view class="dept-filter">
	        <view class="dept-item" 
	              :class="{ 'active': currentDept === dept.id }" 
	              v-for="dept in departmentList" 
	              :key="dept.id"
	              @click="filterByDept(dept.id)">
	          {{ dept.name }}
	        </view>
	        <view class="dept-item" 
	              :class="{ 'active': currentDept === 'all' }" 
	              @click="filterByDept('all')">
	          全部
	        </view>
	      </view>
	      
	      <!-- 搜索框 -->
	      <view class="search-box">
	        <input type="text" 
	                v-model="searchKeyword" 
	                placeholder="搜索成员姓名" 
	                @input="searchMembers">
	        <view class="search-icon uni-icon uni-icon-search"></view>
	      </view>
	      
	      <!-- 成员列表 -->
	      <view class="member-list">
	        <view class="member-item" 
	              v-for="member in filteredMembers" 
	              :key="member.id"
	              :class="{ 'selected': isMemberSelected(member.id) }"
	              @click="toggleMemberSelection(member)">
	          <view class="member-name">{{ member.name }}</view>
	          <view class="member-dept">{{ member.department }}</view>
	          <view class="check-icon" v-if="isMemberSelected(member.id)">√</view>
	        </view>
	      </view>
	      
	    </view>
	    
	    <view class="modal-footer">
	      <button class="cancel-btn" @click="showMemberSelector = false">取消</button>
	      <button class="confirm-btn" @click="confirmMemberSelection">确定</button>
	    </view>
	  </view>
	</view>
</template>

<script>
import request from '/utils/request.js';

export default {
	name: 'UserInfo',
	props: {
		// 已选择的用户列表
		userApplyId: {
			type: Array,
			default: () => []
		},
	},
  data() {
    return {
      // 成员选择相关数据
      showMemberSelector: false,
      departmentList: [
        // { id: 1, name: '技术部' },
        // { id: 2, name: '市场部' },
        // { id: 3, name: '销售部' },
        // { id: 4, name: '客服部' }
      ],
      currentDept: 'all',
      searchKeyword: '',
      allMembers: [
        // { id: 1, name: '张三', department: '技术部', departmentId: 1 },
        // { id: 2, name: '李四', department: '技术部', departmentId: 1 },
        // { id: 3, name: '王五', department: '市场部', departmentId: 2 },
        // { id: 4, name: '赵六', department: '市场部', departmentId: 2 },
        // { id: 5, name: '钱七', department: '销售部', departmentId: 3 },
        // { id: 6, name: '孙八', department: '销售部', departmentId: 3 },
        // { id: 7, name: '周九', department: '客服部', departmentId: 4 },
        // { id: 8, name: '吴十', department: '客服部', departmentId: 4 },
        // { id: 9, name: '郑十一', department: '技术部', departmentId: 1 },
        // { id: 10, name: '王十二', department: '市场部', departmentId: 2 }
      ],
      selectedMembers: [], // 存储选中成员的完整信息
      tempSelectedMembers: [], // 临时存储弹窗中选中的成员
      members: [...this.userApplyId], // 存储选中成员的ID
    }
  },
  computed: {
    // 过滤后的成员列表
    filteredMembers() {
      let members = this.allMembers;
      
      // 部门筛选
      if (this.currentDept !== 'all') {
        members = members.filter(member => member.departmentId === parseInt(this.currentDept));
      }
      
      // 搜索筛选
      if (this.searchKeyword) {
        const keyword = this.searchKeyword.toLowerCase();
        members = members.filter(member => 
          member.name.toLowerCase().includes(keyword)
        );
      }
      
      return members;
    }
  },
	watch: {
		userApplyId: {
		  handler(newVal) {
		    console.log(newVal,'newVal')
		    this.members = newVal;
				this.selectedMembers = this.allMembers.filter(u => newVal.includes(u.id));
		  },
		  immediate: true
		},

		// selectedMembers: {
		// 	handler(newVal, oldVal) {
		// 		const selectedUsers = this.selectedMembers.filter(u => newVal.includes(u.id));
		// 		this.$emit('input', selectedUsers);
		// 	},
		// 	deep: true
		// }
	},
	mounted() {
		this.getUserList()
	},
  methods: {
		async getUserList() {
			await request.get('/system/user/list?pageNum=1&pageSize=9999').then(res => {
			  uni.hideLoading()
			  if (res.code === 200) {
			    this.allMembers = res.rows.map(v => {
						
						return {
							id: v.userName+'',
							name: v.userName,
							department: v.dept?.deptName,
							departmentId: v.deptId
						}
					})
					if (this.members) {
						this.selectedMembers = this.allMembers.filter(u => this.members.includes(u.id));
					}
			  } else {
			    uni.showToast({
			      title: res.msg,
			      icon: 'none'
			    })
			  }
			})
		},
    // 搜索成员
    searchMembers() {
      // 搜索逻辑在computed的filteredMembers中实现
    },
		
		// 切换部门筛选
		filterByDept(deptId) {
		  this.currentDept = deptId;
		},
    
    // 切换成员选择状态
    toggleMemberSelection(member) {
      const index = this.tempSelectedMembers.findIndex(m => m.id === member.id);
      
      if (index === -1) {
        // 添加到选中列表
        this.tempSelectedMembers.push(member);
      } else {
        // 从选中列表移除
        this.tempSelectedMembers.splice(index, 1);
      }
    },
    
    // 检查成员是否已选中
    isMemberSelected(memberId) {
      return this.tempSelectedMembers.some(member => member.id === memberId);
    },
    
    // 确认选择成员
    confirmMemberSelection() {
      // 更新已选中成员列表
      this.selectedMembers = [...this.tempSelectedMembers];
      
      // 更新表单中的成员ID数组
      let ids = this.selectedMembers.map(member => member.id);
			// 通过emits 确定选中的id
			this.$emit('changeSelectUseId', ids)
      
      // 关闭弹窗
      this.showMemberSelector = false;
    },
    
    // 移除已选择的成员
    removeMember(memberId) {
      const index = this.selectedMembers.findIndex(member => member.id === memberId);
      
      if (index !== -1) {
        this.selectedMembers.splice(index, 1);
        let ids = this.selectedMembers.map(member => member.id);
				// 通过emits 确定选中的id
				this.$emit('changeSelectUseId', ids)
      }
			this.tempSelectedMembers = [...this.selectedMembers]
    },
		
  }
}
</script>

<style>

/* 成员选择器样式 */
.member-selector {
  min-height: 40rpx;
  padding: 10rpx 15rpx;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
	border: 1rpx solid #ccc;
}
.selected-members {
  display: flex;
  flex-wrap: wrap;
  gap: 10rpx;
}
.member-tag {
  display: flex;
  align-items: center;
  background-color: #f2f2f2;
  border-radius: 4rpx;
  padding: 5rpx 10rpx;
  font-size: 24rpx;
}
.placeholder {
  color: #999;
}

/* 成员选择弹窗样式 */
.member-selector-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
}
.modal-mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}
.modal-content {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 80%;
  background-color: #fff;
  border-radius: 20rpx 20rpx 0 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.modal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 30rpx;
  border-bottom: 1px solid #eee;
}
.modal-title {
  font-size: 32rpx;
  font-weight: bold;
}
.modal-close {
  font-size: 40rpx;
  color: #999;
}
.modal-body {
  flex: 1;
  /* overflow-y: auto; */
  padding: 20rpx 30rpx;
	height: 500rpx;
}

/* 成员列表 */
.member-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
	height: calc(100% - 160rpx);
	overflow: auto;
}
.member-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx 0;
  border-bottom: 1px solid #eee;
  font-size: 28rpx;
}
.member-item.selected {
  color: #007aff;
}
.member-name {
  font-weight: bold;
}
.member-dept {
  color: #999;
  font-size: 24rpx;
  margin-left: 10rpx;
}
.check-icon {
  width: 30rpx;
  height: 30rpx;
  border-radius: 50%;
  background-color: #007aff;
  color: #fff;
  font-size: 20rpx;
  text-align: center;
  line-height: 30rpx;
}

/* 部门筛选 */
.dept-filter {
  display: flex;
  flex-wrap: wrap;
  gap: 15rpx;
  margin-bottom: 20rpx;
}
.dept-item {
  padding: 10rpx 20rpx;
  background-color: #f2f2f2;
  border-radius: 30rpx;
  font-size: 26rpx;
}
.dept-item.active {
  background-color: #007aff;
  color: #fff;
}

/* 搜索框 */
.search-box {
  position: relative;
  margin-bottom: 20rpx;
}
.search-box input {
  width: calc(100vw - 100rpx) ;
  padding: 15rpx 50rpx 15rpx 15rpx;
  background-color: #f2f2f2;
  border-radius: 40rpx;
  font-size: 26rpx;
  border: none;
}
.search-icon {
  position: absolute;
  right: 15rpx;
  top: 50%;
  transform: translateY(-50%);
  color: #999;
  font-size: 28rpx;
}
/* 底部按钮 */
.modal-footer {
  display: flex;
  border-top: 1px solid #eee;
}
.cancel-btn, .confirm-btn {
  flex: 1;
  padding: 25rpx 0;
  text-align: center;
  font-size: 30rpx;
}
.cancel-btn {
  color: #333;
}
.confirm-btn {
  color: #007aff;
  font-weight: bold;
  border-left: 1px solid #eee;
}
</style>    